<template>
  <div class="w-full text-14px pb-80px">
    <div
      class="w-full h-186px px-20px pt-30px"
      style="
        background: linear-gradient(
          180deg,
          #649ef8 0%,
          #97d3ff 51%,
          #f1fdff 100%
        );
      "
    >
      <div class="flex items-center">
        <div>
          <van-image
            width="50px"
            height="50px"
            fit="cover"
            round
            :src="Info.avatar ? Info.avatar : getImageurl('avatar.png')"
          />
        </div>
        <div class="ml-10px">
          <div>{{ Info.name }} ({{ Info.mobile }})</div>
          <div class="mt-10px">余额:{{ Info.balance }}</div>
        </div>
      </div>
    </div>
    <div class="px-20px w-full">
      <div
        @click="router.push('/index/order/order')"
        class="p-15px w-full rounded-10px bg-white mt-[-70px]"
        style="box-shadow: 0px 0px 4px 0px rgba(82, 139, 180, 0.4)"
      >
        <div class="pb-15px border-b flex justify-between">
          <div>我的订单</div>
          <div
            class="w-74px h-24px flex justify-center items-center text-11px text-[#7C7C7C]"
          >
            查看全部 >
          </div>
        </div>
        <div class="mt-10px flex justify-around items-center">
          <div class="flex flex-col justify-center items-center">
            <div>
              <van-image
                width="42px"
                height="42px"
                fit="contain"
                :src="getImageurl('personal/waitPay.png')"
              />
            </div>
            <div class="text-12px mt-5px">等待付款</div>
          </div>
          <div class="flex flex-col justify-center items-center">
            <div>
              <van-image
                width="42px"
                height="42px"
                fit="contain"
                :src="getImageurl('personal/confirm.png')"
              />
            </div>
            <div class="text-12px mt-5px">收款确认</div>
          </div>
          <div class="flex flex-col justify-center items-center">
            <div>
              <van-image
                width="42px"
                height="42px"
                fit="contain"
                :src="getImageurl('personal/entrust.png')"
              />
            </div>
            <div class="text-12px mt-5px">委托代卖</div>
          </div>
        </div>
      </div>
      <div class="mt-15px flex flex-wrap justify-between">
        <div
          class="w-[48%] h-88px mb-10px relative"
          :style="{
            'background-image': `url(${getImageurl('personal/leiji.png')})`,
            'background-size': 'cover',
          }"
        >
          <div class="absolute top-30px right-20px">
            <div class="text-12px font-bold">上架费累计</div>
            <div class="text-12px mt-10px">{{ Info.sj_price }}元</div>
          </div>
        </div>
        <div
          @click="router.push('/index/personal/redeemOrder')"
          class="w-[48%] h-88px mb-10px relative"
          :style="{
            'background-image': `url(${getImageurl('personal/order.png')})`,
            'background-size': 'cover',
          }"
        >
          <div class="absolute top-30px right-20px">
            <div class="text-12px font-bold">已兑换订单</div>
            <div class="text-12px mt-10px">{{ Info.num }}</div>
          </div>
        </div>
      </div>
      <div
        class="mt-20px bg-white rounded-10px py-30px px-20px w-full"
        style="box-shadow: 0px 0px 4px 0px rgba(166, 166, 166, 0.4)"
      >
        <div
          class="flex justify-between items-center pb-10px border-b"
          @click="router.push('/index/personal/bindingInformation')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('personal/1.png')"
              />
            </div>
            <div class="ml-15px">绑定信息</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
        <div
          class="flex justify-between items-center pb-10px border-b mt-15px"
          @click="router.push('/index/personal/address')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('personal/2.png')"
              />
            </div>
            <div class="ml-15px">地址管理</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
        <div
          class="flex justify-between items-center pb-10px border-b mt-15px"
          @click="router.push('/index/personal/editPsd')"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('personal/3.png')"
              />
            </div>
            <div class="ml-15px">修改密码</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
        <div
          class="flex justify-between items-center pb-10px border-b mt-15px"
          @click="exchange"
        >
          <div class="flex items-center">
            <div>
              <van-image
                width="24px"
                height="24px"
                fit="contain"
                :src="getImageurl('personal/4.png')"
              />
            </div>
            <div class="ml-15px">上架费金额兑换商品</div>
          </div>
          <div>
            <van-icon name="arrow" size="10" />
          </div>
        </div>
      </div>
      <div
        @click="outlogin()"
        class="w-full h-49px flex justify-center items-center text-white bg-[#2E95FF] mt-20px rounded-5px"
      >
        退出登录
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { showToast } from "vant";
import getImageurl from "@/util/getImageurl";
import { userInfo, userMyPage, outLogin } from "@/util/api";
import { useUserStore } from "@/store/index";
const router = useRouter();
const Info = ref({});
const store = useUserStore();
const exchange = () => {
  showToast("此功能暂无开放");
};
const getData = async () => {
  const res = await userMyPage();
  Info.value = res.msg;
  // console.log(Info.value);
};
getData();
const outlogin = async () => {
  store.$patch({
    Token: "",
  });
  const res = await outLogin();
  showToast(res.msg);
  res.code == 1 ? router.push("/index/login") : "";
};
</script>
<style scoped lang="scss"></style>
